<template>
  <div class="contianr">
    <div style="text-align: center;
    font-size: 16px;
      ">
      <img src="../../assets/img/titles/zuo.png" alt="">
      <span style="color: aqua;">设备统计</span>
      <img src="../../assets/img/titles/you.png" alt="">
    </div>
    <div class="dotted">
      <div class="com-dotted" ref="seller_ref">
      </div>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    list: {
      type: Array,
      default: () => []
    }

  },
  name: "xs-grad",
  data() {
    return {
      chartInstance: null,
      data: [],
      text: ""
    };
  },
  mounted() {
    this.initChart(this.data);
  },
  watch: {
    list(a) {

      this.text = ""
      this.initChart(a);


    }
  },
  methods: {
    initChart(HistogramList) {

      this.chartInstance = this.$echarts.init(this.$refs.seller_ref);
      if (HistogramList.length === 0) {
        this.data = [
          { name: 'daqiya', value: 0 },
          { name: 'fengli', value: 0 },
          { name: 'fengsu', value: 0 },
          { name: 'fengxiang', value: 0 },
          { name: 'fengxiangDangWei', value: 0 },
          { name: 'pmTen', value: 0 },
          { name: 'pmTwoFive', value: 0 },
          { name: 'shidu', value: 0 },
          { name: 'tsp', value: 0 },
          { name: 'wendu', value: 0 },
          { name: 'zaosheng', value: 0 },
        ];
      } else {
        this.data = [
          { name: 'daqiya', value: parseFloat(HistogramList[0].daqiya) },
          { name: 'fengli', value: parseFloat(HistogramList[0].fengli) },
          { name: 'fengsu', value: parseFloat(HistogramList[0].fengsu) },
          { name: 'fengxiang', value: parseFloat(HistogramList[0].fengxiang) },
          { name: 'fengxiangDangWei', value: parseFloat(HistogramList[0].fengxiangDangWei) },
          { name: 'pmTen', value: parseFloat(HistogramList[0].pmTen) },
          { name: 'pmTwoFive', value: parseFloat(HistogramList[0].pmTwoFive) },
          { name: 'shidu', value: parseFloat(HistogramList[0].shidu) },
          { name: 'tsp', value: parseFloat(HistogramList[0].tsp) },
          { name: 'wendu', value: parseFloat(HistogramList[0].wendu) },
          { name: 'zaosheng', value: parseFloat(HistogramList[0].zaosheng) },
        ];
      }

      const options = {
        color: ['#2C53F8'],
        title: {
          text: '',
          // subtext: '在此测试',
          x: 'center',
          y: 'top',
          textAlign: 'center',
          textStyle: {
            color: "#fff",
          }
        },
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'shadow'
          }
        },
        // 修改图表的大小
        grid: {
          left: "0%",
          top: "15%",
          right: "2%",
          bottom: "4%",
          containLabel: true
        },
        xAxis: {
          type: 'category',
          data: ['大气压', '风力', '风速', '风向', '风向单位', 'PM10', 'PM2.5', '湿度', 'TSP', '温度', '噪声',],
          axisTick: {
            alignWithLabel: true
          },
          // 修改刻度标签 相关样式
          axisLabel: {
            color: "rgba(255,255,255,.6) ",
            fontSize: "8",
            interval: 0
          },
          // 不显示x坐标轴的样式
          axisLine: {
            show: false
          }
        },
        yAxis: [
          {
            type: "value",
            // 修改刻度标签 相关样式
            axisLabel: {
              color: "rgba(255,255,255,.6) ",
              fontSize: 10
            },
            // y轴的线条改为了 2像素
            axisLine: {
              lineStyle: {
                color: "rgba(255,255,255,.1)",
                width: 2
              }
            },
            // y轴分割线的颜色
            splitLine: {
              lineStyle: {
                color: "rgba(255,255,255,.1)"
              }
            }
          }
        ],
        series: [
          {
            data: this.data.map(item => item.value),
            type: 'bar',
            itemStyle: {
              // 修改柱子圆角
              barBorderRadius: 5
            }
          }
        ]
      };

      this.chartInstance.setOption(options);
      // this.showTime()
      // this.pieActive()
      // 鼠标划出
      this.chartInstance.on('mouseout', () => {
        this.pieActive()
      })
    },
    // 实现循环高亮
    //   showTime() {
    //     let index = 0;
    // let dataLength = this.data.length;

    // this.timer = setInterval(() => {
    //   if (index > dataLength + 1) {
    //     index = 0;
    //   }
    //   this.chartInstance.dispatchAction({
    //     type: 'showTip',
    //     seriesIndex: 0,
    //     dataIndex: index
    //   });
    //   index++;
    // }, 1500);
    //   },
    pieActive() {
      // 鼠标划入
      this.chartInstance.on('mouseover', () => {
        // 停止定时器，清除之前的高亮
        clearInterval(this.timer);
        this.chartInstance.dispatchAction({
          type: 'downplay',
          seriesIndex: 0,
        });
      });
    }
  },
  // beforeDestroy() {
  //   clearInterval(this.showTime())
  // }
}
</script>


<style scoped>
.contianr{
  width: 100%;
  height: 100%;
  background-size: cover;
  position: relative;

}
.contianr:before {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    border-top:  1px solid #1417c1;
    border-right: 1px solid #0048ff;
    width: 30%;
    height: 50%;
  }
  .contianr:after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    border-bottom: 1px solid #0562f8;
    border-left: 1px solid #0048ff;
    width: 30%;
    height: 50%;
  }
.dotted {
  width: 100%;
  height: 100%;
}

.com-dotted {

  width: 100%;
  height:90%;
}
</style>